<template>
  <dt class="top">
    <div class="cver">
      <img v-lazy="`${playlistData.coverImgUrl}?param=100y100`" />

      <a href="javascript:;" class="msk mask1" :title="playlistData.name"></a>
    </div>
    <div class="tit">
      <a href="javascript:;" :title="playlistData.name">
        <h3 class="overtext f-fs1 unline">{{ playlistData.name }}</h3>
      </a>

      <div class="btn clearfix">
        <a href="javascript:;" title="播放" class="s-bg-9 s-bg">播放</a>
        <a href="javascript:;" title="收藏" class="s-bg-10 s-bg">收藏</a>
      </div>
    </div>
  </dt>
  <dd>
    <ol class="ol">
      <li v-for="(itme, index) in PlaylistD" :key="itme.id">
        <span class="no">{{ index + 1 }}</span>
        <router-link
          :to="{
            name: 'songpage',
            query: {
              id: itme.id,
            },
          }"
          class="nm unline overtext s-fc0"
          :title="itme.name"
          >{{ itme.name }}</router-link
        >
        <OperMerge :songdata="itme"></OperMerge>
      </li>
    </ol>
    <div class="more">
      <a href="javascript:;" class="s-fc0 unline">查看全部></a>
    </div>
  </dd>
</template>

<script>
import OperMerge from "@/encapsulation/SongFn/OperMerge.vue";
import { getPlaylistAllFn } from "@/api/index.js";

import { shallowRef } from "vue";
export default {
  name: "RecommendSongList",
  props: { playlistData: { type: Object } },
  components: { OperMerge },
  setup(props) {
    let PlaylistD = shallowRef([]);
    getPlaylistAllFn(props.playlistData.id).then((response) => {
      PlaylistD.value = [...response.data.songs];
    });

    return {
      PlaylistD,
    };
  },
};
</script>

<style scoped lang="less">
.top {
  height: 100px;
  padding: 20px 0 0 19px;
}
.more {
  clear: both;
  height: 32px;
  margin-right: 32px;
  text-align: right;
  line-height: 32px;
}
.cver {
  float: left;
  position: relative;
  width: 80px;
  height: 80px;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .msk {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
.tit {
  float: left;
  width: 116px;
  margin: 6px 0 0 10px;
  h3 {
    width: 100%;
  }
  .btn {
    margin-top: 10px;
    a {
      display: block;
      float: left;
      width: 22px;
      height: 22px;
      margin-right: 10px;
      text-indent: -9999px;
    }
  }
}
.s-bg-9 {
  background-position: -267px -205px;
  &:hover {
    background-position: -267px -235px;
  }
}
.s-bg-10 {
  background-position: -300px -205px;
  &:hover {
    background-position: -300px -235px;
  }
}
.ol {
  height: 319px;
  margin-left: 50px;
  line-height: 32px;
  li {
    height: 32px;
    &:hover {
      .nm {
        width: 96px;
      }
      .oper /deep/ {
        display: block;
      }
    }
  }
  .no {
    float: left;
    position: relative;
    width: 35px;
    height: 32px;
    margin-left: -35px;
    text-align: center;
    color: #c10d0c;
    font-size: 16px;
  }
  .nm {
    float: left;
    width: 170px;
    height: 32px;
  }
  .oper /deep/ {
    display: none;
  }
}
</style>
